<template>
  <el-card class="garbage-points">
    <template #header>
      <h3>附近垃圾存放点</h3>
    </template>
    <el-tabs v-model="activeTab" type="card">
      <el-tab-pane label="地图视图" name="map">
        <!-- 模拟地图 -->
        <div class="map-container">
          <!-- <img src="https://picsum.photos/800/400?grayscale" alt="垃圾存放点地图" class="map-image"> -->
           <img src="/images/campus-map.png" alt="校园垃圾存放点地图" class="map-image">
          <div v-for="point in garbagePoints" :key="point.id" 
               class="point-marker" 
               :style="{ left: point.x + '%', top: point.y + '%' }"
               @click="showPointDetail(point)">
            <span class="marker-icon">{{ point.type }}</span>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="列表视图" name="list">
        <el-table :data="garbagePoints" stripe>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="type" label="类型"></el-table-column>
          <el-table-column prop="location" label="位置"></el-table-column>
          <el-table-column prop="distance" label="距离"></el-table-column>
          <el-table-column prop="workingHours" label="开放时间"></el-table-column>
          <el-table-column label="操作">
            <template #default="scope">
              <el-button size="mini" type="primary" @click="showPointDetail(scope.row)">查看详情</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
  </el-card>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getGarbagePoints } from '@/api/student';
import { ElMessageBox } from 'element-plus';

const activeTab = ref('map');
const garbagePoints = ref([]);
const selectedPoint = ref(null);

onMounted(async () => {
  try {
    const response = await getGarbagePoints();
    garbagePoints.value = response.data;
  } catch (error) {
    console.error('获取垃圾点失败:', error);
  }
});

const showPointDetail = (point) => {
  selectedPoint.value = point;
  // 弹出详情对话框
  ElMessageBox.alert(`
    <h4>${point.name}</h4>
    <p>类型: ${point.type}</p>
    <p>位置: ${point.location}</p>
    <p>距离: ${point.distance}米</p>
    <p>开放时间: ${point.workingHours}</p>
    <p>可投放垃圾: ${point.accepts.join('、')}</p>
  `, '垃圾存放点详情', {
    dangerouslyUseHTMLString: true,
    confirmButtonText: '关闭'
  });
};
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

.map-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.point-marker {
  position: absolute;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
}

.marker-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  background-color: #409EFF;
  color: white;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 0 8px rgba(0,0,0,0.3);
}
</style>